<template >
    <div v-if="value">
        <el-dialog
        class="writeOffInvoiceDialogClass"
            title="修改冲销金额"
            :visible.sync="dialogShow"
            :before-close="handleClose"
            width="1000px"
            :append-to-body="true"
        >
            <el-row>
                <el-col :span="8">
                    <div class="writeOffInvoiceDialogClassTitle">可冲销数量：</div><el-input  v-model="writeRow.kcxsl" size="small" :disabled="true" ></el-input>
                </el-col>
                <el-col :span="8">
                    <div class="writeOffInvoiceDialogClassTitle">可冲销金额：</div><el-input v-model="writeRow.kcxje" size="small"  :disabled="true" ></el-input>
                </el-col>
                <el-col :span="8">
                    <div class="writeOffInvoiceDialogClassTitle">
                        可冲销税额：
                    </div>
                    <el-input v-model="writeRow.kcxse" size="small" :disabled="true"></el-input>
                </el-col>
            </el-row>
            <el-row style="margin-top:10px;">
                <el-col :span="8">
                    <div class="writeOffInvoiceDialogClassTitle">冲销数量：</div>
                    -<el-input-number v-model="writeRow.cxsl" :disabled="cxslDisable"  @change="slChange" size="small"  :min="0.000001" :max="writeRow.kcxsl" ></el-input-number>
                </el-col>
                <el-col :span="8">
                    <div class="writeOffInvoiceDialogClassTitle">冲销金额：</div>

                    -<el-input-number v-model="writeRow.cxje" :disabled="cxjeDisable"  @change="jeChange" size="small"  :min="0.01" :max="writeRow.kcxje" ></el-input-number>
                </el-col>
                <el-col :span="8">
                    <div class="writeOffInvoiceDialogClassTitle">
                        冲销税额：
                    </div>
                    -<el-input-number v-model="writeRow.cxse" :disabled="true"  size="small"  ></el-input-number>
                </el-col>
            </el-row>

            <span slot="footer" class="dialog-footer">
                <el-button size="small"  @click="handleClose">
                    取消
                </el-button>
                <el-button size="small" type="primary" @click="OpenInvoice">
                    确认
                </el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>

export default {
    name:"writeOffInvoice",
    props: {
        value: {
            type: Boolean,
            default: false,
        },
        dbRow: {
            type: Object,
            default: ()=>{},
        },
    },
    data() {
        return {
            writeRow:null,
            dialogShow:false,
        }
    },
    computed:{
        cxslDisable(){
            return (this.writeRow.chyydm == 1) // 冲红原因是1是开票有误，则不可修改
           ||  (this.writeRow.chyydm == 2 && this.writeRow.kcxsl<= 0 && this.writeRow.kcxje>0) // 冲红原因是2是销货退回，没有数量只有金额
        || (this.writeRow.chyydm == 4) // 销售折让不允许操作数量
        },
        cxjeDisable(){
            return  (this.writeRow.chyydm == 1) // 冲红原因是1是开票有误，则不可修改 
            || ((this.writeRow.chyydm == 2) && (this.writeRow.kcxsl> 0))  // 冲销数量有值,就禁止操作金额和税额
        },
    },
    watch:{
        dbRow(){
            this.dialogShow = true;
             this.writeRow = this.dbRow;
        }
    },
    methods: {
        // 这俩函数需要看下逻辑, 是修改原有属性
        slChange(){
            this.writeRow.cxje = (this.writeRow.cxsl * this.writeRow.dj).toFixed(2)
            this.writeRow.cxse = (this.writeRow.cxje * this.writeRow.slv).toFixed(2)
        },
        jeChange(){
            this.writeRow.cxse = (this.writeRow.cxje * this.writeRow.slv).toFixed(2)
        },
        handleClose() {
            this.$emit('input', false)
        },
        OpenInvoice(){
            this.$emit('writeCb', this.writeRow)
            this.handleClose()
        },
    },
}
</script>

<style lang="scss">
.writeOffInvoiceDialogClass {
    .writeOffInvoiceDialogClassTitle{
        display: inline-block;
        width: 120px;
        line-height: 32px;
        text-align: right;
    }
    .el-input{
        width: calc(100% - 120px);
        width: -ms-calc(100% - 120px); 
    }
    .el-input-number{
        .el-input{
            width: 100%;
        }
    }

    .el-dialog__body{
        padding: 10px;
    }

}


</style>